<script setup lang="ts">
import { create } from '@/api/llm/model'
import useDictStore from '@/store/modules/dict'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router'

const formRef = ref<FormInstance>()
const router = useRouter()
const { model_type } = useDictStore().getDicts('model_type')
const formData = reactive({
  modelType: '',
  modelName: '',
  modelUrl: '',
  modelKey: '',
})
const validationRules: FormRules = {
  modelType: [{ required: true, message: '请输入' }],
  modelName: [{ required: true, message: '请输入' }],
  modelUrl: [{ required: true, message: '请输入' }],
  modelKey: [],
}

/** 提交表单 */
async function onSubmit() {
  formRef.value.validate(async (valid) => {
    console.log('🚀 ~ file: useApply.ts:51 ~ onSubmit ~ valid:', valid)
    if (!valid) return
    // console.log(toRaw(formData))
    const { code, msg } = await create(toRaw(formData))
    if (code === 200) {
      ElMessage.success('成功')
      router.back()
    } else {
      ElMessage.error(`失败：${msg}`)
    }
  })
}
</script>

<template>
  <div class="space-y-2">
    <card>
      <template #title>
        <span>新增模型</span>
        <!-- 表单内容 -->
      </template>
      <el-form ref="formRef" class="w-[520px]" label-width="200px" element-loading-text="加载中" :model="formData"
        :rules="validationRules">
        <el-form-item label="模型名称" prop="modelName">
          <el-input v-model="formData.modelName" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="模型类别" prop="modelType">
          <!-- <el-input v-model="formData.modelType" placeholder="请输入" /> -->
          <el-select v-model="formData.modelType" clearable placeholder="请选择">
            <el-option v-for="item in model_type" :key="item.label" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="模型地址" prop="modelUrl">
          <el-input v-model="formData.modelUrl" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="模型密钥" prop="modelKey">
          <el-input v-model="formData.modelKey" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">新增模型</el-button>
          <el-button @click="
            router.push({
              path: '/llm/model',
            })
            ">返回</el-button>
        </el-form-item>
      </el-form>
    </card>
  </div>
</template>

<style scoped lang="scss">
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}
</style>
